import styled from "@emotion/styled"
import ButtonRegular from "@/components/composite/ButtonRegular/main"

const ButtonBox = styled.div`
    margin-top: 8rem;
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 11rem;
`

const CancelButton = styled(ButtonRegular)`
    width: 146rem;
    height: 40rem;
    color: #ff3568;
    background: white !important;
    border: 1px solid #ff3568;
    box-shadow: none;
`

const ConfirmButton = styled(ButtonRegular)`
    width: 146rem;
    height: 40rem;
    color: #fffffff2;
    box-shadow: none;
`

interface ButtonGroupProps {
    onCancel: () => void
    onConfirm: () => void
    cancelText?: string
    confirmText?: string
}

export const ButtonGroup = ({
    onCancel,
    onConfirm,
    cancelText = "Do it later",
    confirmText = "Go to setting",
}: ButtonGroupProps) => {
    return (
        <ButtonBox>
            <CancelButton onClick={onCancel}>{cancelText}</CancelButton>
            <ConfirmButton onClick={onConfirm}>{confirmText}</ConfirmButton>
        </ButtonBox>
    )
}
